/**
 *  文章管理 > 类别管理
 */
const BASE_URL = 'http://api-breakingnews-web.itheima.net'

// 第一个功能 :  获取类别数据 展示
function mg_load() {
  //1. 发送请求
  axios
    .get(`${BASE_URL}/my/article/cates`, {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log('获取类别:', res.data.data)

      // 1.5 清空之前的内容
      $('tbody').empty()

      //2. 遍历数组, 把 每一个 tr 都添加到 tbody 里面
      res.data.data.forEach(v => {
        let theTr = `<tr>
            <td>${v.name}</td>
            <td>${v.alias}</td>
            <td>
              <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button"
                class="layui-btn layui-btn-xs edit">编辑</button>

              <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`
        $('tbody').append(theTr)
      })
    })
}

mg_load()

//第二个功能 : 添加类别
// 1. 给 `添加类别` 注册一个点击事件
$('.add').on('click', function () {
  //2. 弹框
  let index = layer.open({
    type: 1,
    content: add_str, // 弹层里面显示内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      console.log('success-------------')

      // 3. 注册 submit 事件
      $('.add-form').on('submit', function (e) {
        e.preventDefault()

        //4. 收集数据
        let data = $('form').serialize()

        // 5. 发送请求
        axios
          .post(`${BASE_URL}/my/article/addcates`, data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('添加之后的结果', res)
            // 添加之后收尾工作 : TODO
            // 收尾1 : 重新加载数据
            mg_load()

            // 收尾2 : 提示
            layer.msg('添加类别成功', { icon: 1, time: 2000 })

            layer.close(index)
          })
      })
    },
  })
})

// 第三个功能 : 删除
//1. 注册事件
$('tbody').on('click', '.delete', function () {
  //2. 获取id
  let id = $(this).attr('myid')

  layer.confirm('是否要删除级别?', function (index) {
    //3. 发送请求
    axios
      .get(`${BASE_URL}/my/article/deletecate/${id}`, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(function () {
        // console.log('删除结果:', res.data)
        //收尾1 : 提示
        layer.msg('删除类别成功', { icon: 1, time: 2000 })

        //收尾2 : 重新加载
        mg_load()
      })

    layer.close(index)
  })
})

// 第四个功能 : 编辑
//1. 注册事件
$('tbody').on('click', '.edit', function () {
  //2. 获取之前的数据
  let id = $(this).attr('myid')
  let name = $(this).attr('data-name')
  let alias = $(this).attr('data-alias')
  // console.log(id, name, alias)
  //3. 弹框
  let index = layui.layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    // 显示成功就会走 success
    success() {
      console.log('successs------------------')
      // 4. 回显 (把上面第2步获取的数据 展示到表单上)
      $('#edit_form input[name=name]').val(name)
      $('#edit_form input[name=alias]').val(alias)

      // 5. 给表单注册 submit 事件
      $('#edit_form').on('submit', function (e) {
        e.preventDefault()
        //6. 收集最新的值
        let name = $('#edit_form input[name=name]').val()
        let alias = $('#edit_form input[name=alias]').val()
        console.log('这是最新的值', name, alias)
        let data = `name=${name}&alias=${alias}&Id=${id}` // 注意: 这里是Id (大写)

        //7. 发送请求-编辑
        axios
          .post(`${BASE_URL}/my/article/updatecate`, data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('编辑的结果:', res.data)
            if (res.data.status === 0) {
              //收尾1 : 提示框
              layer.msg('更新成功', { icon: 1 })

              //收尾2 : 重新加载
              mg_load()

              // 收尾3 : 关闭 编辑框
              layer.close(index)
            }
          })
      })
    },
  })
})

// *************************************************************
// 字符串1 : 添加类别的
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button  class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`

// 字符串2 : 编辑类别的
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
